<div
  class="htf-layout-widget"
  *ngIf="plugExists()">

  <!-- Wrap contents in an extra div for the background color animation. -->
  <div [@animateIn]="'in'">

    <div class="htf-layout-widget-header">
      <div>Operator input</div>
    </div>

    <div class="htf-layout-widget-body">
      <!-- <markdown [data]="markdown"></markdown> -->
      <div [innerHTML]="promptHtml"></div>

      <div *ngIf="promptForm">
        <json-schema-form
          #jsonSchemaForm
          [form]="promptForm"
          (onChanges)="formContentChanged($event)"
          (keyup.enter)="sendResponse()">
        </json-schema-form>
      </div>

      <!-- <input
        #response_field
        [style.display]="hasTextInput() ? 'inline' : 'none'"
        [class.user-input-has-error]="error"
        type="text"
        class="u-push-top"
        (keyup.enter)="sendResponse(response_field)"> -->

      <div class="user-input-error-text u-push-top-third" *ngIf="error">
        {{ error }}
      </div>
      
      <div class="user-input-button-container">
        <div *ngFor="let option of options" class="u-text-align-right">
          <button
            type="button"
            class="htf-rounded-button-grey user-input-button-{{option.level}}"
            (click)="sendResponse(option.key)">
            {{ option.name }}
          </button>
        </div>
      </div>

    </div>

  </div>
</div>
